<style>
  body {
    background-color: #0a0a0a; /* 中灰色 */
  }
  
  .jumbotron{
	  margin-top:100px;
  }
  

  .navbar {
    background-color: #0a0a0a; /* 深灰色 */
    height: 100px;
  }

  .navbar-default .navbar-nav > li > a {
    color: #ffffff; /* 白色文字 */
    font-size: 18px; /* 增加字体大小 */
  }

  .navbar-default .navbar-nav > li > a:hover {
    color: #0000ff; /* 鼠标悬停时的文字颜色为蓝色 */
  }

  .navbar-default .navbar-brand {
    color: #ffffff; /* 品牌文字颜色 */
    font-size: 24px; /* 增加品牌文字的字体大小 */
  }

  .navbar-default .navbar-brand:hover {
    color: #0000ff; /* 品牌文字悬停时的颜色为蓝色 */
  }

  /* 可选：设置活动状态的文字颜色 */
  .navbar-default .navbar-nav > li.active > a {
    color: #0000ff; /* 活动状态的文字颜色为蓝色 */
  }

  .navbar-default .navbar-nav > li.active > a:hover {
    color: #0000ff; /* 活动状态悬停时的文字颜色为蓝色 */
  }

  /* 增加导航栏内部元素的垂直居中 */
  .navbar .navbar-nav > li > a,
  .navbar .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  /* 表格样式 */
    .table {
		margin-top:15px;
      background-color: #f8f9fa; /* 表格背景颜色 */
    }
	
  
    .table thead th {
		margin-top:20px;
		background-color: #333333; /* 表头背景颜色 */
		color: #ffffff; /* 表头文字颜色 */
		font-size: 18px; /* 表头文字大小 */
    }
  
    .table tbody tr {
      background-color: #f1f1f1; /* 表格行背景颜色 */
    }
  
    .table tbody tr td {
      vertical-align: middle; /* 垂直居中对齐 */
      font-size: 16px; /* 表格文字大小 */
    }
  
    .table tbody tr td a {
      margin-right: 0.5rem; /* 按钮间距 */
    }
  
    .table tbody tr td button {
      margin-right: 0.5rem; /* 按钮间距 */
    }
  
    .table tbody tr td .btn {
      font-size: 14px; /* 按钮文字大小 */
    }
  
  
  
</style>


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="#">Employer Management</a>
	</div>
	<div id="navbar" class="navbar-collapse collapse">
	  <ul class="nav navbar-nav">
		<li><a href="main.php">index</a></li>
		<li><a href="goodsList.php">Product Management</a></li>
		<li><a href="servicesList.php">Services Management</a></li>
		<li><a href="reviewsList.php">Reviews Management</a></li>
		<li><a href="appointmentList.php">AppointmentLisT Management</a></li>
		
	  </ul>
	  <ul class="nav navbar-nav navbar-right">
		<li class="active"><a href="login.php">logout <span class="sr-only">(current)</span></a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</nav>